<template>
  <div class="search-bar">
    <div class="xinzeng">
      <el-button type="text" @click="addShowInit()"
        ><i class="fas fa-plus"></i>新增</el-button
      >
      <el-button type="text" @click="exportExcel"
        ><i class="el-icon-download"></i>导出</el-button
      >
      <!-- <el-button type="text"><i class="fas fa-file-import"></i>导入</el-button> -->
      <el-upload
        action
        :show-file-list="false"
        :on-change="importExcel"
        :auto-upload="false"
      >
        <el-button icon="upload" type="text" size="small"
          ><i class="fas fa-file-import"></i>导入</el-button
        >
      </el-upload>
    </div>

    <el-table :data="list" border style="width: 100%">
      <el-table-column label="#" type="index" width="50"></el-table-column>
      <el-table-column label="账号" prop="accountNo"></el-table-column>
      <el-table-column label="账户名称" prop="name"></el-table-column>
      <el-table-column label="币种" prop="currency_dictText"></el-table-column>
      <el-table-column label="初始余额" prop="initBal"></el-table-column>
      <el-table-column label="行号" prop="bankNo"></el-table-column>
      <el-table-column label="银行地址" prop="bankAddress"></el-table-column>
      <el-table-column
        label="账户管理员"
        prop="manager_dictText"
      ></el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <span v-show="scope.row.isEnabled == '1'">是</span>
          <span v-show="scope.row.isEnabled != '1'">否</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="note"></el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            style="color: #1890ff"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <span style="color: #bbb; margin-right: 3px">|</span>
          <el-dropdown size="small">
            <span class="el-dropdown-link" style="color: #1890ff">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-button
                size="mini"
                type="text"
                style="color: rgba(0, 0, 0, 0.65); margin: 0 5px"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加或者修改募捐团队模态框 -->
    <el-drawer
      :title="id ? '编辑' : '新增'"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form
        :model="listForm"
        :rules="rules"
        ref="listForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="accountNo">
          <el-input v-model="listForm.accountNo"></el-input>
        </el-form-item>
        <el-form-item label="账户名称" prop="name">
          <el-input v-model="listForm.name"></el-input>
        </el-form-item>
        <el-form-item label="币种">
          <el-select
            v-model="listForm.currency_dictText"
            placeholder="请选择币种"
          >
            <el-option
              v-for="(item, index) in bizhong"
              :key="index"
              :label="item.title"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="初始余额" prop="initBal">
          <el-input v-model="listForm.initBal"></el-input>
        </el-form-item>
        <el-form-item
          label="行号"
          prop="bankNo"
          style="display: block; margin-bottom: 15px"
        >
          <el-input v-model="listForm.bankNo"></el-input>
        </el-form-item>
        <el-form-item label="银行地址" prop="bankAddress">
          <el-input v-model="listForm.bankAddress"></el-input>
        </el-form-item>
        <el-form-item label="账户管理员">
          <el-select
            v-model="listForm.manager_dictText"
            placeholder="请选择账户管理员"
          >
            <el-option
              v-for="(item, index) in guanliyuan"
              :key="index"
              :label="item.title"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="listForm.note"></el-input>
        </el-form-item>
        <el-form-item label="附件" prop="attachment">
          <el-upload
            action
            :show-file-list="false"
            :on-change="importExcel"
            :auto-upload="false"
          >
            <el-button icon="upload" type="text" size="small"
              ><i class="fas fa-file-import"></i>点击上传</el-button
            >
          </el-upload>
        </el-form-item>
        <el-form-item label="是否启用" prop="isEnabled">
          <el-select v-model="listForm.isEnabled" placeholder="请选择是否启用">
            <el-option
              v-for="(item, index) in enable"
              :key="index"
              :label="item.title"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="创建人"
          prop="createBy"
          style="display: block; margin-bottom: 15px"
        >
          <el-input v-model="listForm.createBy" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            type="datetime"
            v-model="listForm.createTime"
            placeholder="选择创建时间"
            disabled
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="修改人" prop="updateBy">
          <el-input v-model="listForm.updateBy" disabled></el-input>
        </el-form-item>
        <el-form-item label="修改时间" prop="updateTime">
          <el-date-picker
            type="datetime"
            v-model="listForm.updateTime"
            placeholder="选择修改时间"
            disabled
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="btns">
          <el-button @click="resetForm('listForm')" style="margin-right: 10px"
            >取消</el-button
          >
          <el-button
            v-if="id"
            type="primary"
            style="background-color: #17b3a3; border: none"
            @click="editForm('listForm')"
            >确定</el-button
          >
          <el-button
            v-else
            type="success"
            style="background-color: #17b3a3; border: none"
            @click="addForm('listForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-drawer>

    <pagination
      :page="queryInfo.pageNo"
      :componentTotal="total"
      @changeRows="setPageSize"
      @changePage="setPageNo"
    ></pagination>
  </div>
</template>

<script>
import { Button } from "element-ui";
import axios from "axios";
import Pagination from "../Pagination.vue";
import { excelExportUseJson, excelImport } from "../../assets/js/xlsx";

export default {
  components: {
    "el-button": Button,
    Pagination,
  },
  data() {
    return {
      search1: "", // 用于存储编码
      search2: "", // 用于存储名称
      isExpanded: false, // 控制展开/收起的状态
      direction: "rtl",
      queryInfo: {
        _t: "",
        column: "createTime",
        order: "desc",
        field:
          "id,,,accountNo,name,currency_dictText,initBal,bankNo,bankAddress,manager_dictText,isEnabled_dictText,note,action",
        pageNo: 1,
        pageSize: 10,
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      list: [],
      total: 0, // 用于存储总数
      loading: false, // 加载状态
      listHeader: {
        accountNo: "账号",
        name: "账户名称",
        currency_dictText: "币种",
        initBal: "初始余额",
        bankNo: "行号",
        bankAddress: "银行地址",
        manager_dictText: "账户管理员",
        note: "备注",
        attachment: "附件",
        isEnabled: "是否启用",
      },
      listForm: {
        accountNo: "",
        attachment: "",
        bankAddress: "",
        bankNo: "",
        createBy: "",
        createBy_dictText: "",
        createTime: "",
        currency: "",
        currency_dictText: "",
        id: "",
        initBal: "",
        isEnabled: "",
        isEnabled_dictText: "",
        manager: "",
        manager_dictText: "",
        name: "",
        note: "",
        updateBy: "",
        updateBy_dictText: "",
        updateTime: "",
        version: "",
      },
      drawer: false,
      id: null,
      options: [],
      rules: {
        accountNo: [{ required: true, message: "请输入账号", trigger: "blur" }],
        name: [{ required: true, message: "请输入账户名称", trigger: "blur" }],
        initBal: [
          { required: true, message: "请输入初始余额", trigger: "blur" },
        ],
        currency: [{ required: true, message: "请选择币种", trigger: "blur" }],
        isEnabled: [
          { required: true, message: "请选择是否启用", trigger: "blur" },
        ],
      },
      enable: [],
      bizhong: [],
      guanliyuan: [],
    };
  },
  mounted() {
    this.getGongYing();
    this.allTypeList();
    this.Admin();
    this.Enable(); // 在组件加载时获取数据
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    // 查询币种
    allTypeList() {
      this.axios
        .get(
          "http://8.142.74.15:48082/jeecg-boot/sys/dict/getDictItems/bas_currency,name,code"
        )
        .then((res) => {
          this.bizhong = res.data.result;
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("获取币种列表失败");
        });
    },
    // 查询管理员
    Admin() {
      this.axios
        .get(
          "http://8.142.74.15:48082/jeecg-boot/sys/dict/getDictItems/sys_user,realname,username"
        )
        .then((res) => {
          this.guanliyuan = res.data.result;
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("获取管理员列表失败");
        });
    },
    // 查询是否启用
    Enable() {
      this.axios
        .get("http://8.142.74.15:48082/jeecg-boot/sys/dict/getDictItems/yn")
        .then((res) => {
          this.enable = res.data.result;
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("获取是否启用列表失败");
        });
    },
    // 添加任务
    addShowInit() {
      this.drawer = true;
      this.id = null;
      this.listForm = {
        accountNo: "",
        name: "",
        currency: "",
        isEnabled: "",
        initBal: "",
        bankNo: "",
        bankAddress: "",
        manager: "",
        note: "",
        createBy: "",
        createTime: "",
        updateBy: "",
        updateTime: "",
      };
    },
    addForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return false;
        await this.axios
          .post(
            "http://8.142.74.15:48082/jeecg-boot/bas/basBankAccount/add",
            this.listForm
          )
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
        this.drawer = false;
        this.getGongYing();
      });
    },
    // 编辑任务handleExceed
    async handleEdit(row) {
      this.listForm = { ...row };
      this.drawer = true;
      this.id = row.id;
    },
    editForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return false;
        const { data: res } = await this.axios.put(
          "http://8.142.74.15:48082/jeecg-boot/bas/basBankAccount/edit",
          this.listForm
        );
        if (res.code != 200) return this.$message.error("修改任务失败");
        this.$message.success("修改编辑成功");
        this.drawer = false;
        this.getGongYing();
      });
    },
    //取消重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.drawer = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 删除任务
    handleDelete(row) {
      console.log(row);
      this.$confirm("是否删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteSamplereport(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async deleteSamplereport(id) {
      await this.axios
        .delete(
          `http://8.142.74.15:48082/jeecg-boot/bas/basBankAccount/delete?id=${id}`
        )
        .then((res) => {
          console.log(res);
          this.getGongYing();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 导出
    exportExcel() {
      excelExportUseJson(this.list, this.listHeader, "银行账户报表");
    },
    // 导入
    importExcel(file) {
      console.log(file);
      excelImport(file.raw, "json").then((res) => {
        res = res.map((item) => {
          let newUserFrom = {};
          for (let [headerKey, headerVal] of Object.entries(this.listHeader)) {
            newUserFrom[headerKey] = item[headerVal];
          }
          newUserFrom.passWord = "123456";
          return newUserFrom;
        });
        console.log(res);
      });
    },
    // 查询列表
    async getGongYing() {
      this.loading = true; // 设置加载状态
      this.queryInfo._t = new Date().getTime(); // 防止缓存
      try {
        const { data: res } = await axios.get(
          "http://8.142.74.15:48082/jeecg-boot/bas/basBankAccount/list",
          {
            params: this.queryInfo,
          }
        );

        if (res.code !== 200) {
          this.$message.error("获取任务管理列表失败");
          return;
        }
        this.list = res.result.records; // 获取记录
        this.total = res.result.total; // 获取总数
      } catch (error) {
        console.error("Error fetching data:", error);
        this.$message.error("请求数据失败，请重试。");
      } finally {
        this.loading = false; // 取消加载状态
      }
    },
    // 分页器
    setPageSize(val) {
      this.queryInfo.pageSize = val;
      this.getGongYing();
    },
    setPageNo(val) {
      this.queryInfo.pageNo = val;
      this.getGongYing();
    },
    handleReset() {
      this.search1 = "";
      this.search2 = "";
      this.queryInfo.code = "";
      this.queryInfo.name = "";
      this.queryInfo.pageNo = 1;
      this.queryInfo.pageSize = 10;
      this.getGongYing(); // 重置后重新获取数据
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded; // 切换展开状态
    },
  },
};
</script>

<style scoped>
.search-bar {
  height: 100%;
  margin: 0;
  padding: 8px 24px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  transition: all 0.3s;
  border-radius: 2px;
}

.select-bar {
  display: flex;
  align-items: center;
}

.select-item {
  display: flex;
  align-items: center;
  padding: 0 12px;
  width: 384px;
}

label {
  width: 49px;
  color: #000;
  margin-right: 8px;
}

.input-field {
  width: 335px;
  height: 22px;
  padding: 4px 11px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  transition: border-color 0.3s; /* 边框颜色变化过渡 */
  outline: none; /* 移除默认轮廓 */
}

/* 输入框鼠标悬停效果 */
.input-field:hover {
  border-color: #409eff; /* 悬停时边框颜色 */
}

/* 输入框获得焦点时的样式 */
.input-field:focus {
  border-color: #409eff; /* 焦点时边框颜色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5); /* 焦点时阴影 */
}

/* 按钮样式 */
.search-button,
.reset-button,
.toggle-button,
.submit-button {
  padding: 10px 15px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  transition: background-color 0.3s; /* 背景颜色变化过渡 */
}

/* 查询按钮 */
.search-button {
  background-color: #409eff; /* 主色调 */
  color: white; /* 字体颜色 */
  border: 1px solid #409eff;
  width: 82px;
  height: 32px;
  line-height: 12px;
}

/* 查询按钮悬停效果 */
.search-button:hover {
  background-color: #66b1ff; /* 悬停时背景色 */
  border-color: #66b1ff;
}

/* 重置按钮 */
.reset-button {
  background-color: #fff; /* 重置按钮背景 */
  color: rgba(0, 0, 0, 0.65); /* 字体颜色 */
  border: 1px solid #d9d9d9;
  width: 82px;
  height: 32px;
  line-height: 12px;
  margin-left: 8px;
  padding: 0 15px;
  transition: all 0.3s;
}

/* 重置按钮悬停效果 */
.reset-button:hover {
  background-color: #e6f7ff; /* 悬停时背景色 */
  border-color: #409eff;
  color: #409eff;
}

/* 提交按钮 */
.submit-button {
  background-color: #fff; /* 提交按钮背景 */
  color: rgba(0, 0, 0, 0.65); /* 字体颜色 */
  border: 1px solid #d9d9d9;
  width: 82px;
  height: 32px;
  line-height: 12px;
  margin-left: 8px;
  padding: 0 15px;
  transition: all 0.3s;
}

/* 提交按钮悬停效果 */
.submit-button:hover {
  background-color: #e6f7ff; /* 悬停时背景色 */
  border-color: #409eff;
  color: #409eff;
}

/* 图标样式 */
.search-button i,
.reset-button i,
.toggle-button i,
.submit-button i {
  margin-right: 5px; /* 图标与文本之间的间距 */
}
.toggle-button {
  border: none;
  background-color: #fff;
  color: #409eff;
}
/* xinzeng */
.xinzeng {
  display: flex;
  width: 300px;
  align-items: center;
}
.el-button {
  margin-right: 10px;
}
.el-button i {
  margin-right: 5px;
}
.shanchu:hover {
  background-color: #096ba0;
  color: #096dd9;
}
/* 展开内容的样式 */
/*.expand-content {
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background-color: #f9f9f9;
      } */
</style>
